<template>
  <div>
    <div class="search-bar">
      <el-row :gutter="20">
        <el-col :span="4">
          <el-input v-model="searchMaterialForm.materialCode" placeholder="请输入维修材料编号" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="searchMaterialForm.materialAllName" placeholder="请输入维修材料全称" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-input v-model="searchMaterialForm.materialName" placeholder="请输入维修材料简称" clearable></el-input>
        </el-col>
        <el-col :span="4">
          <el-select v-model="searchMaterialForm.state" placeholder="请选择状态" class="custom-select" clearable>
            <el-option label="可用" value="0"></el-option>
            <el-option label="不可用" value="1"></el-option>
          </el-select>
        </el-col>
        <el-col :span="5" :offset="1">
          <el-button type="primary" @click="searchMaterials">查询</el-button>
        </el-col>
      </el-row>
    </div>

    <div class="search-bar">
      <el-row :gutter="20">
        <el-col :span="5" :offset="17">
          <el-button type="primary" @click="handleAddMaterial">添加材料</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="search-bar">
      <!-- 材料表格 -->
      <el-table :data="materials" empty-text="暂无数据" style="width: 90%">
        <el-table-column prop="materialCode" label="材料编号"></el-table-column>
        <el-table-column prop="materialAllName" label="材料全称"></el-table-column>
        <el-table-column prop="materialName" label="材料简称"></el-table-column>
        <el-table-column prop="inventory" label="库存数量"></el-table-column>
        <el-table-column prop="specType" label="规格类型"></el-table-column>
        <el-table-column prop="amount" label="单价"></el-table-column>
        <el-table-column prop="state" label="状态">
          <template #default="scope">
            {{ scope.row.state === 0 ? "启用" : "禁用" }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" min-width="120">
          <template #default="scope">
            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" :type="scope.row.state === 0 ? 'danger' : 'success'"
                       @click="toggleMaterialState(scope.$index, scope.row)">
              {{ scope.row.state === 1 ? "启用" : "禁用" }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页组件 -->
    <el-pagination
        v-model:current-page="searchMaterialForm.pageNum"
        v-model:page-size="searchMaterialForm.pageSize"
        :page-sizes="[10, 15, 20]"
        layout="total, sizes, prev, pager, next"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
    >
    </el-pagination>

    <!-- 添加材料对话框 -->
    <el-dialog v-model="dialogVisible" width="30%">
      <el-form :model="newMaterial" :rules="rules" ref="addFormRef" label-width="100px">
        <span class="bold-large">添加材料</span>
        <el-form-item label="材料编号" prop="materialCode">
          <el-input v-model="newMaterial.materialCode"></el-input>
        </el-form-item>
        <el-form-item label="材料全称" prop="materialAllName">
          <el-input v-model="newMaterial.materialAllName"></el-input>
        </el-form-item>
        <el-form-item label="材料名称" prop="materialName">
          <el-input v-model="newMaterial.materialName"></el-input>
        </el-form-item>
        <el-form-item label="规格型号" prop="specType">
          <el-input v-model="newMaterial.specType"></el-input>
        </el-form-item>
        <el-form-item label="计量单位" prop="meteringUnit">
          <el-input v-model="newMaterial.meteringUnit"></el-input>
        </el-form-item>
        <el-form-item label="库存数量" prop="inventory">
          <el-input v-model.number="newMaterial.inventory" type="number"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="newMaterial.remark"></el-input>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model.number="newMaterial.amount" type="number"></el-input>
        </el-form-item>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmAddMaterial">确 定</el-button>
        </span>
      </el-form>
    </el-dialog>

    <!-- 编辑材料对话框 -->
    <el-dialog v-model="editDialogVisible" width="30%">
      <el-form :model="editMaterial" ref="editFormRef" label-width="100px">
        <span class="bold-large">修改材料</span>
        <el-form-item label="材料全称">
          <el-input v-model="editMaterial.materialAllName"></el-input>
        </el-form-item>
        <el-form-item label="材料名称">
          <el-input v-model="editMaterial.materialName"></el-input>
        </el-form-item>
        <el-form-item label="规格型号">
          <el-input v-model="editMaterial.specType"></el-input>
        </el-form-item>
        <el-form-item label="计量单位">
          <el-input v-model="editMaterial.meteringUnit"></el-input>
        </el-form-item>
        <el-form-item label="库存数量">
          <el-input v-model.number="editMaterial.inventory" type="number"></el-input>
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="editMaterial.remark"></el-input>
        </el-form-item>
        <el-form-item label="金额">
          <el-input v-model.number="editMaterial.amount" type="number"></el-input>
        </el-form-item>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmEditMaterial">确 定</el-button>
        </span>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref, reactive, onMounted} from 'vue';
import axios from 'axios';
import {useRouter} from 'vue-router';

const materials = ref([]);
const dialogVisible = ref(false);
const newMaterial = reactive({
  materialCode: "",
  materialAllName: "",
  materialName: "",
  specType: "",
  meteringUnit: "",
  inventory: null,
  remark: "",
  amount: null,
});

const editDialogVisible = ref(false);
const editMaterial = reactive({
  materialAllName: "",
  materialName: "",
  specType: "",
  meteringUnit: "",
  inventory: null,
  remark: "",
  amount: null,
});

const searchMaterialForm = reactive({
  materialCode: "",
  materialName: "",
  materialAllName: "",
  state: null,
  pageNum: 1,
  pageSize: 10,
});

const total = ref(0);
const router = useRouter();

const rules = {
  materialCode: [{ required: true, message: '请输入材料编号', trigger: 'blur' }],
  materialAllName: [{ required: true, message: '请输入材料全称', trigger: 'blur' }],
  materialName: [{ required: true, message: '请输入材料名称', trigger: 'blur' }],
  specType: [{ required: true, message: '请输入规格型号', trigger: 'blur' }],
  meteringUnit: [{ required: true, message: '请输入计量单位', trigger: 'blur' }],
  inventory: [{ required: true, message: '请输入库存数量', trigger: 'blur' }],
  remark: [{ required: true, message: '请输入备注', trigger: 'blur' }],
  amount: [{ required: true, message: '请输入金额', trigger: 'blur' }],
};

const handlePageChange = (newPage) => {
  searchMaterialForm.pageNum = newPage;
  searchMaterials();
};

const handleSizeChange = (newPageSize) => {
  searchMaterialForm.pageSize = newPageSize;
  searchMaterials();
};

const handleAddMaterial = () => {
  dialogVisible.value = true;
};

const confirmAddMaterial = () => {
  this.$refs.addFormRef.validate((valid) => {
    if (valid) {
      axios.post('/repaircenter/housingMaterial/insertHousingMaterial', newMaterial)
          .then(response => {
            dialogVisible.value = false;
            Object.assign(newMaterial, {
              materialCode: "",
              materialAllName: "",
              materialName: "",
              specType: "",
              meteringUnit: "",
              inventory: null,
              remark: "",
              amount: null,
            });
            searchMaterials();
          })
          .catch(error => {
            console.error('材料添加失败', error);
          });
    } else {
      console.log('error submit!!');
      return false;
    }
  });
};

const handleEdit = (index, row) => {
  Object.assign(editMaterial, row);
  editDialogVisible.value = true;
};

const confirmEditMaterial = () => {
  axios.post('/repaircenter/housingMaterial/updateHousingMaterial', editMaterial)
      .then(response => {
        editDialogVisible.value = false;
        searchMaterials();
      })
      .catch(error => {
        console.error('材料编辑失败', error);
      });
};

const searchMaterials = () => {
  axios.post('/repaircenter/housingMaterial/searchHousingMaterialList', searchMaterialForm)
      .then(response => {
        materials.value = response.data.data.list;
        total.value = response.data.data.total;
      })
      .catch(error => {
        console.error('材料查询失败', error);
      });
};

const toggleMaterialState = (index, row) => {
  const url = row.state === 1 ? '/repaircenter/housingMaterial/recoverHousingMaterial' : '/repaircenter/housingMaterial/removeHousingMaterial';
  axios.delete(url, {params: {housingMaterialCode: row.materialCode}})
      .then(response => {
        materials.value[index].state = materials.value[index].state === 1 ? 0 : 1;
      })
      .catch(error => {
        console.error('材料状态切换失败', error);
      });
};

onMounted(() => {
  searchMaterials();
});
</script>

<style scoped>
.bold-large {
  font-weight: bold;
  font-size: 1.5em; /* 调整字体大小，可以根据需要调整 */
}
.search-bar {
  width: 100%;
  margin-bottom: 15px;
}

.custom-select {
  width: 200px; /* 根据需要调整宽度 */
}
</style>
